<template>
	<view class="forms">
		<u--form labelPosition="left" :model="form" ref="formList" labelWidth="120" class="formINFOs" v-if="show != 1">
			<u-form-item label="安全措施" borderBottom @click="show=1">
				<u--input v-model="form.aqcss" placeholder="安全措施" disabled disabledColor="#ffffff" border="none">
				</u--input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>
			<user-pick :label="'编制人'" :multiple="false" :title="'编制人'" :placeholder="'请选择编制人'" v-model="form.bzr"
				:prop="'bzr'"></user-pick>
			<view class="textears">
				<view class="textItem" v-for="(item,index) in form.aqcs" :key="index" @click="removeHarm(index)">
					<span>{{item.label}}</span> <span style="display: inline-block;float: right">
						<u-icon name="minus-circle" color="red"></u-icon>
					</span></view>

				<!--        <u-checkbox-group v-model="form.aqcs" placement="column" :labelSize='32'>-->
				<!--          <u-checkbox activeColor="#53c21d" v-for="(item,index) in form.aqcs" :label="item.label"-->
				<!--                      :name="item.value" shape="circle" :key="index" style="padding: 10px 20px" :checked='true'>-->
				<!--          </u-checkbox>-->
				<!--        </u-checkbox-group>-->
			</view>
		</u--form>
		<Safe @option123="options1234" v-if="show === 1" :pageCheck="pageCheck" ref="aqcs"></Safe>
		<view class="btn">
			<u-button type="primary" text="上一步" style="margin: 0 10px" @click="superior"></u-button>
			<u-button type="primary" :text="text" style="margin: 0 10px" @click="nextStep"></u-button>
		</view>
	</view>
</template>

<script>
	import hazardousFactors from '../hazardousFactors/hazardousFactors.vue'
	import protection from '../protection/protection.vue'
	import Safe from '../safetyMeasures/safetyMeasures.vue'
	import userPick from "@/pages/Components/userPick";
	export default {
		components: {
			hazardousFactors,
			protection,
			Safe,
			userPick
		},
		props: ['pageCheck'],
		data() {
			return {
				text: "确定",
				show: false,
				formModel: {
					name: "",
					userPicker: "",
					datetime: "",
					picker: "",
				},
				list: null,
				form: {
					aqcss: '',
					bzr: '',
					aqcs: [],
				}
			}
		},
		methods: {
			removeHarm(index) {
				this.form.aqcs.splice(index, 1)
			},
			options1234(val) {
				this.text = "下一步"
				this.show = false
				this.form.aqcs = val
			},
			superior() {
				this.$emit("aqcsSubmit", {
					step: 2,
					value: this.form.aqcs,
					bzr: this.form.bzr
				})
			},
			nextStep() {
				if (this.pageCheck === 3) {
					this.$refs.aqcs && this.$refs.aqcs.toHotWork()
				}
				this.show = false
				this.$emit("aqcsSubmit", {
					step: this.$refs.aqcs ? 3 : 4,
					value: this.form.aqcs,
					bzr: this.form.bzr
				})
			},
			submit() {
				this.pageCheck++
			}
		}
	}
</script>

<style lang="scss" scoped>
	.forms {
		.formINFOs {
			background: #FFF;
			display: flex;
			height: 85vh;
			padding: 0 !important;
			flex-direction: column;

			.textears {
				flex: 1;
				display: flex;
				flex-direction: column;
				padding: 0 30rpx;
				background: #f6f6f6;
				margin-bottom: 30px;
				border-radius: 8px;
				overflow-y: auto;

				.textItem {
					padding: 15rpx 0;
				}
			}
		}

		.btn {
			padding: 15px 0;
			display: flex;
			justify-content: space-between;
		}
	}
</style>
